	<template>
	<view class="content-ques">
		<view class="view-content-content">
			<!-- 标题 -->
			<view class="item-title">{{question.title}}</view>
			<!-- 用户信息 -->
			<view class="view-header">
				<!-- 头像 -->
				<image :src="question.portrait" class="image-photo"></image>
				<view class="header-txt">
					<text class="name">{{ question.realname }}</text>
					<view style="flex-direction: row; display: flex; align-items: center;">
						<text class="sub">北大荒</text>
					</view>
				</view>
			</view>
			<!-- 详情描述 -->
			<view class="item-desc">{{question.content}}</view>
			<!-- 图片 -->
			<view class="item-imgs">
				<image
					:src="itemImg"
					class="image-imgs"
					v-for="(itemImg, indexImg) in question.pics"
					:index="indexImg"
					:key="indexImg"
					mode="aspectFill"
					@click="cliclImage(question.pics, indexImg)"
				></image>
			</view>

			<view class="view-delete-detail">
				<text class="sub">{{question.time}}</text>
				<view style="flex: 1;"></view>
				<!-- <text style="padding-left: 20rpx;	color: #004261;" @click="clickDeleteDetail()" v-if="question.extMap.canDel">删除</text> -->
			</view>
			<view class="view-delete-detail">
				<view class="bottom-item">
					<view class="das-icons cuIcon-view bottom-item-image"></view>
					<text class="bottom-item-text">{{question.viewCount}}</text>
				</view>
				<view class="bottom-item" style="	justify-content: center;">
					<view class="das-icons cuIcon-msg bottom-item-image"></view>
					<text class="bottom-item-text">{{question.commentNum}}</text>
				</view>
				<view class="bottom-item" style="	justify-content: flex-end;" @click="clickPraise(question.isZan)">
					<view class="das-icons cuIcon-zaned bottom-item-image" style="color:#d81e07" v-if="question.isZan"></view>
					<view class="das-icons cuIcon-zan bottom-item-image" v-else></view>
					<text class="bottom-item-text">{{question.zanNum}}</text>
				</view>
			</view>
		</view>
		<!-- <five-commentlist :commentList="commentList" @clickPraise="clickPraiseSig" @clickDelete="clickDeleteSig"></five-commentlist> -->
		<!-- 
		@param: commentList展示的评论列表数据
		@method: clickPraise 点赞评论
		@method: clickDelete 删除父级评论
		@method: clickRecommentChild 点赞子评论
		@method: clickDeleteChild 删除子评论
		 -->
		<five-mul-commentlist
			:commentList="commentList"
			@clickPraise="clickPraiseComment"
			@clickDelete="clickDeleteComment"
			@clickDeleteChild="clickDeleteCommentChild"
			@clickRecomment="clickRecomment"
			@clickRecommentChild="clickRecommentChild"
		></five-mul-commentlist>

		<view class="view-conmment-send-bottom">
			<view class=" view-comment-textarea" @click="clickComment()"><view class="textarea-comment">写评论…</view></view>
		</view>
		<five-comment ref="detailComment" @sendComment="sendComment" :placeholder="placeholder"></five-comment>
	</view>
</template>

<script>
	import dateUtils from '@/common/util/dateUtils.js';
/**
 * @author: 小五
 * @time：	2020-07-07
 * 注：
 * 1. 评论详情 、回复评论及回复子评论功能实际是调用接口实现，在这里只为实现效果，逻辑无参考价值
 */
export default {
	data() {
		return {
			avatar:this.$config.imgUrl+"/"+this.$store.getters.avatar,
			userUrl:this.$config.apiUrl+"/appUserController/queryById",
			answerUrl:this.$config.apiUrl+"/answerController/getAnswerList",
			addViewCountUrl:this.$config.apiUrl+"/questionController/addViewCount",
			getQuestionInfoUrl:this.$config.apiUrl+"/questionController/getQuestionInfo",
			addZanUrl:this.$config.apiUrl+"/zanController/addZan",
			delZanUrl:this.$config.apiUrl+"/zanController/delZan",
			addCommentUrl:this.$config.apiUrl+"/answerController/addAnswer",
			delCommentUrl:this.$config.apiUrl+"/answerController/delAnswer",
			commentList: [],
			question:{
				viewCount:0,
				extMap:{
					isZan:false,
					zanNum:0,
					commentNum:0,
					canDel:false,
					avatar:''
				}
			},
			person:{//提问者
				avatar:''
			},
			//评论组件相关
			placeholder: '请输入评论内容…',
			commentParam: {}
		};
	},
	onLoad: function(option) {
		let query=this.$Route.query;
		var arr = Object.keys(query);
		if(arr.length != 0){
			this.question=query;
			this.getQuestionInfo();
			this.addViewCount();
			this.getComment(); //获取评论列表
			
		}
	},
	methods: {
		/**
		 * 获取问题详情
		 */
		getQuestionInfo() {
			if(this.question.id){
				let param={
					questionId:this.question.id,
					appUserId:this.$store.getters.userid
				};
				this.$http.post(this.getQuestionInfoUrl,param).then(res=>{
					// console.log(res)
					if (res.data.ok){
						//转换部分值
						let q = res.data.data;
						this.question.canDel=q.canDel;
						this.question.zanNum=q.zanNum;
						this.question.isZan=q.isZan;
						this.question.commentNum=q.commentNum;
						this.question.time=q.time;
						
					}
				}).catch(()=>{
					this.$tip.error('获取问题失败！')
				});
			}
		},
		/**
		 * 获取评论详情
		 */
		getComment() {
			let param={
				id:this.question.id,
				appUserId:this.$store.getters.userid
			};
			if(this.question.id){
				this.$http.post(this.answerUrl,param).then(res=>{
					// console.log(res)
					if (res.data.ok){
						this.commentList = res.data.data;
						for(var i=0;i<this.commentList.length;i++){
							let avatar=this.commentList[i].extMap.avatar;
							if(avatar){
								avatar=this.$config.imgUrl+'/'+avatar;
							}else{
								avatar='/static/avatar_boy.png';
							}
							this.commentList[i].extMap.avatar=avatar;
						}
						// console.log(this.commentList)
					}
				}).catch(()=>{
					this.$tip.error('获取评论失败！')
				});
			}
		},
		/**
		 * 增加浏览记录数
		 */
		addViewCount() {
			if(this.question.id){
				this.$http.post(this.addViewCountUrl,{id:this.question.id}).then(res=>{
					// console.log(res)
					if (res.data.ok){
						let q = res.data.data;
						this.question.viewCount=q.viewCount;
					}
				}).catch(()=>{
					this.$tip.error('获取评论失败！')
				});
			}
		},
		/**
		 * 写评论
		 */
		clickComment() {
			let time=dateUtils.dateFormat('YYYY-mm-dd HH:MM:SS',new Date());
			this.commentParam = {
				userid:this.$store.getters.userid,
				questionid:this.question.id,
				content:'',
				time: time,
				extMap:{
					userName: this.$store.getters.realname,
					isZan: false,
					zanNum: 0,
					canDel: true,
					avatar: this.avatar
				}
			};
			this.$refs.detailComment.open();
		},
		/**
		 * 发送评论
		 * @param {Object} result
		 */
		sendComment(result) {
			this.commentParam.content = result;
			this.commentList.push(this.commentParam);
			let param={
				userid:this.$store.getters.userid,
				questionid:this.question.id,
				parentId:this.commentParam.parentId,
				content:result,
				time: this.commentParam.time
			};
			this.$http.post(this.addCommentUrl,param).then(res=>{
				if (res.data.ok){
					let  comment = res.data.data;
				}
			}).catch(()=>{
				this.$tip.error('点赞失败！')
			});
		},
		/**
		 * 回复 评论
		 * @param {Object} item
		 */
		clickRecomment(item) {
			this.commentParam = {};
			let time=dateUtils.dateFormat('YYYY-mm-dd HH:MM:SS',new Date());
			this.commentParam = {
				userid:this.$store.getters.userid,
				questionid:this.question.id,
				parentId:item.id,
				content:'',
				time: time,
				extMap:{
					userName: this.$store.getters.realname,
					isZan: false,
					zanNum: 0,
					canDel: true,
					avatar: this.avatar
				}
			};
			this.$refs.detailComment.open();
			this.placeholder = '回复' + item.extMap.userName + ':';
		},
		/**
		 * 回复评论的评论
		 * @param {Object} item
		 */
		clickRecommentChild(item) {
			this.commentParam = {};
			this.$refs.detailComment.open();
			this.placeholder = '回复' + item.FIRSTNICKNAME + ':';
		},
		/**
		 * 删除多级评论
		 */
		clickDeleteComment(item,index) {
			let this_=this;
			uni.showModal({
				title: '提示',
				content: '确定要删除评论吗？',
				confirmColor: '#12B368',
				success: function(res) {
					/* 调用接口删除 */
					let param={
						id:item.id
					};
					this_.$http.post(this_.delCommentUrl,param).then(res=>{
						if (res.data.ok){
							console.log(index);
							this_.commentList.splice(index,1);
						}
					}).catch(()=>{
						this_.$tip.error('删除评论失败！')
					});
				}
			});
		},
		/**
		 * 删除多级子评论
		 */
		clickDeleteCommentChild(item) {
			uni.showModal({
				title: '提示',
				content: '确定要删除评论吗？',
				confirmColor: '#12B368',
				success: function(res) {
					/* 调用接口删除 */
				}
			});
		},
		/**
		 * 删除单级评论
		 */
		clickDeleteSig(item) {
			uni.showModal({
				title: '提示',
				content: '确定要删除评论吗？',
				confirmColor: '#12B368',
				success: function(res) {
					/* 调用接口删除 */
				}
			});
		},
		
		/**
		 * 点赞相关
		 */
		
		/**
		 * 详情点赞
		 * @param {Object} isPraise
		 */
		clickPraise(isPraise) {
			let isZan=!isPraise;
			this.question.isZan=isZan;
			if(isPraise){
				this.question.zanNum--;
			}else{
				this.question.zanNum++;
			}
			
			let param={
				subjectid:this.question.id,
				userid:this.$store.getters.userid
			};
			if(isPraise){
				this.$http.post(this.delZanUrl,param).then(res=>{
					if (res.data.ok){
						let  zanCount = res.data.data;
						// console.log(zanCount);
					}
				}).catch(()=>{
					this.$tip.error('取消赞失败！')
				});
			}else{
				this.$http.post(this.addZanUrl,param).then(res=>{
					if (res.data.ok){
						let  zan = res.data.data;
						// console.log(zan);
					}
				}).catch(()=>{
					this.$tip.error('点赞失败！')
				});
			}
			
		},
		
		/**
		 * 点赞多级评论
		 * @param {Object} item
		 */
		clickPraiseComment(item) {
			let isZan=item.extMap.isZan;
			item.extMap.isZan=!isZan;
			
			if(isZan){
				item.extMap.zanNum--;
			}else{
				item.extMap.zanNum++;
			}
			
			let param={
				subjectid:item.id,
				userid:this.$store.getters.userid
			};
			if(isZan){
				this.$http.post(this.delZanUrl,param).then(res=>{
					if (res.data.ok){
						let  zanCount = res.data.data;
						// console.log(zanCount);
					}
				}).catch(()=>{
					this.$tip.error('取消赞失败！')
				});
			}else{
				this.$http.post(this.addZanUrl,param).then(res=>{
					if (res.data.ok){
						let  zan = res.data.data;
						// console.log(zan);
					}
				}).catch(()=>{
					this.$tip.error('点赞失败！')
				});
			}
		},
		
		/**
		 * 点赞单级评论
		 */
		clickPraiseSig(item) {
			//只能点赞不能取消
			if (item.extMap.isZan == '1') {
				return;
			}
			item.extMap.isZan = '1';
			item.extMap.zanNum++;
		},
		/**
		 *  查看图片大图
		 * @param {Object} images
		 * @param {Object} index
		 */
		cliclImage(images, index) {
			uni.previewImage({
				urls: images,
				current: index,
				longPressActions: {
					itemColor: '#12B368',
					success: function(data) {},
					fail: function(err) {}
				}
			});
		}
		
	}
};
</script>

<style lang="scss">
	
page,
.content-ques {
	background-color: $view-bg-color;
}

.view-delete-detail {
	flex: 1;
	display: flex;
	font-size: 26rpx;
}
.bottom-item {
	flex: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 80rpx;
	.bottom-item-image {
		font-size: 40rpx;
		color: $uni-text-color;
	}
	.bottom-item-text {
		font-size: $uni-font-size-sm;
		margin-left: 20rpx;
		color: $uni-text-color;
	}
}
.view-content-content {
	background-color: white;
	flex-direction: column;
	padding: 5rpx 50rpx 0 30rpx;
}
.view-header {
	display: flex;
	align-items: center;
	flex-direction: row;

	.image-photo {
		height: 90rpx;
		width: 90rpx;
		background-color: $view-bg-color;
		border: 1px solid $line-color;
		border-radius: 45rpx;
		margin-right: 30rpx;
	}

	.header-txt {
		display: flex;
		flex-direction: column;
		color: $uni-text-color-grey;
		line-height: 1.5;
		justify-content: center;
		font-size: $uni-font-size-sm;
		.name {
			color: #004261;
			font-weight: bold;
			font-size: $uni-font-size-base;
		}
	}
}
.sub {
	color: $uni-text-color-grey;
	font-size: $uni-font-size-sm;
}
.item-title {
	color: $uni-text-color;
	line-height: 2.6;
	font-size: $uni-font-size-lg;
	margin-top: 0rpx;
}
.item-desc {
	color: $uni-text-color;
	line-height: 1.6;
	font-size: $uni-font-size-base;
	margin-top: 20rpx;
}

.item-imgs {
	margin: 20rpx 0;
	display: flex;
	flex-direction: row;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;

	.image-imgs {
		border-radius: 10rpx;
		background-color: $view-bg-color;
		height: 220rpx;
		width: 220rpx;
		margin: 1px 4rpx;
	}
}

.view-conmment-send-bottom {
	width: 100%;
	position: fixed;
	bottom: 0;
	display: flex;
	flex-direction: row;
	background-color: white;
	border-top: 1px solid $view-bg-color;
}

.view-comment-textarea {
	background-color: $uni-bg-color-grey;
	border-radius: 40rpx;
	padding: 15rpx 20rpx;
	margin: 25rpx 20rpx;
	width: 80%;
	flex: 1;
	align-items: center;
}
.textarea-comment {
	padding: 0;
	// width: 100%;
	height: 100%;
	font-size: $uni-font-size-base;
	// color: $uni-text-color;
	color: $uni-text-sub-color;
}
.icon-comment {
	font-size: 46rpx;
	color: $uni-text-color;
	margin: 0 30rpx 0 5rpx;
}
.view-btn-comment {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: $uni-font-size-base;
	color: white;
	height: 70rpx;
	width: 120rpx;
	border-radius: 10rpx;
	background-color: $theme-color;
	font-weight: 500;
}
.textarea-bottom {
	background-color: white;
	padding: 20rpx;
}
</style>
